<template>
    <div class="new_project">
        <div class="left-menu">
            <div class="user_info">
                <div><img class="h50" src="../../assets/image/user@2x.png" alt="" /></div>
                <div class="user_info_content">
                    <div class="user_info_name">{{ username }}</div>
                    <div class="user_info_introduction">{{ t('home.defaultIntroduction') }}</div>
                </div>
            </div>
            <div class="project-menu">
                <div
                    v-for="item in asideList"
                    :key="item.key"
                    class="project-menu-box"
                    :class="{ active: showActiveKey === item.key }"
                    @click="handleSelect(item.key)"
                >
                    <img class="h16" :src="item.icon" alt="" />
                    <span class="project-menu-name">{{ item.value }}</span>
                </div>
            </div>
            <div class="loginOut" @click="loginOut">
                <img src="../../assets/image/log_out@2x.png" alt="" />
                <span>{{ t('login.logout') }}</span>
            </div>
        </div>
        <div class="right_content">
            <RouterView />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { deleteCookie, getCookie } from '@/utils/utils';
import { useRouter } from 'vue-router';
import { init, asideList, handleSelect, showActiveKey, initTheme } from './menuConfig';
import { t } from '@/i18n';

const router = useRouter();
const username = getCookie('user_name');
function loginOut() {
    deleteCookie('SaaS_Token');
    deleteCookie('user_name');
    router.push({ name: '/login' });
}
initTheme();
init();
</script>

<style scoped>
.new_project {
    height: 100%;
    margin: 20px auto;
    width: 1360px;
}
.left-menu {
    height: calc(100% - 40px);
    background-color: #ffffff;
    width: 268px;
    float: left;
}
.user_info {
    padding: 40px 18px;
    display: flex;
}
.h50 {
    height: 50px;
}

.user_info_content {
    width: 156px;
    margin-left: 10px;
    margin-top: 5px;
}
.user_info_name {
    line-height: 18px;
    font-size: 16px;
    color: var(--text-accent);
}

.user_info_introduction {
    font-size: 12px;
    color: var(--text-primary);
    margin-top: 5px;
}
.project-menu .active {
    background-color: var(--secondary-color);
}
.project-menu-box {
    cursor: pointer;
    height: 36px;
    line-height: 36px;
    padding-left: 44px;
}
.h16 {
    height: 16px;
}

.project-menu-name {
    margin-left: 20px;
    font-size: 14px;
    color: var(----text-primary);
}
.right_content {
    float: right;
    width: calc(100% - 288px);
    margin-left: 20px;
    height: calc(100% - 40px);
    overflow: auto;
}
.right_content::-webkit-scrollbar {
    width: 0 !important;
}
.loginOut {
    position: absolute;
    bottom: 40px;
    padding-left: 44px;
}
.loginOut > img {
    height: 16px;
}
.loginOut > span {
    font-size: 14px;
    margin-left: 20px;
    color: var(--text-weaken);
}
.left-menu {
    position: relative;
}
</style>
